<template>
  <div class="group-component" v-if="groupList.length !== 0">
    <el-card v-for="item in groupList" class="mb10" shadow="never">
      <template #header>
        <span class="font16">第{{ item.raceRound }}轮</span>
      </template>
      <template #default>
        <el-collapse accordion>
          <el-collapse-item v-for="o in item.scheduleInfoList"
            :disabled="o.homeTeamName === '轮空' || o.awayTeamName === '轮空'">
            <template #title>
              <div class="card-item flex font16">
                <div class="flex">
                  <div class="mr30">
                    {{
                      o.homeTeamName != "轮空" ? o.raceOrder : "&nbsp;&nbsp;"
                    }}
                  </div>
                  <div class="mr30">{{ o.groupName }}</div>
                </div>
                <el-dropdown class="card-group" trigger="hover" @command="showClick($event, o, 'homeTeamId')">
                  <div class="card-flex cursor-pointer">
                    {{ o.homeTeamName
                    }}<img :src="o.homeTeamLogo" class="card-img ml10" />
                  </div>
                  <template #dropdown>
                    <el-dropdown-menu>
                      <el-dropdown-item disabled class="drop-line">
                        <p style="color: var(--color-danger)">*</p>
                        <p>选择交换对阵位置</p>
                      </el-dropdown-item>
                      <div v-for="ot in optionList">
                        <el-dropdown-item v-if="o.homeTeamName != ot.teamName" :command="ot.teamId">
                          <p>{{ ot.teamName }}</p>
                        </el-dropdown-item>
                      </div>
                    </el-dropdown-menu>
                  </template>
                </el-dropdown>
                <div class="ml10 mr10">vs</div>
                <el-dropdown class="card-group-right" trigger="hover" @command="showClick($event, o, 'awayTeamId')">
                  <div class="card-flex cursor-pointer">
                    <img v-if="o.awayTeamName != '轮空'" :src="o.awayTeamLogo" class="card-img mr10" />{{ o.awayTeamName }}
                  </div>
                  <template #dropdown>
                    <el-dropdown-menu>
                      <el-dropdown-item disabled class="drop-line">
                        <p style="color: var(--color-danger)">*</p>
                        <p>选择交换对阵位置</p>
                      </el-dropdown-item>
                      <div v-for="ott in optionList">
                        <el-dropdown-item v-if="o.awayTeamName != ott.teamName" :command="ott.teamId">
                          <p>{{ ott.teamName }}</p>
                        </el-dropdown-item>
                      </div>
                    </el-dropdown-menu>
                  </template>
                </el-dropdown>
              </div>
            </template>
            <el-divider border-style="dotted" />
            <el-form label-width="120px">
              <el-row justify="space-around">
                <el-col :span="10">
                  <el-form-item label="时间">
                    <el-date-picker v-model="o.matchDate" type="datetime" placeholder="请选择"
                      value-format="YYYY-MM-DD HH:mm:ss" />
                  </el-form-item>
                </el-col>
                <el-col :span="10">
                  <el-form-item label="地点">
                    <el-input v-model="o.matchAddress" placeholder="请输入地点" />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-divider border-style="dotted" />
              <el-row justify="space-around" class="mt10">
                <el-col :span="6">
                  <el-form-item label="比赛监督">
                    <el-select v-model="o.matchSupervisionId" placeholder="请选择">
                      <el-option v-for="item in state.matchSupervisionList" :label="item.idName"
                        :value="item.wxUserRoleId" />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="裁判监督">
                    <el-select v-model="o.judgeSupervisionId" placeholder="请选择">
                      <el-option v-for="item in state.judgeSupervisionList" :label="item.idName"
                        :value="item.wxUserRoleId" />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="裁判员">
                    <el-select v-model="o.judgeId" placeholder="请选择">
                      <el-option v-for="item in state.judgeList" :label="item.idName" :value="item.wxUserRoleId" />
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row justify="space-around" class="mt10">
                <el-col :span="6">
                  <el-form-item label="第一助理裁判员">
                    <el-select v-model="o.firstJudgeAssistantId" placeholder="请选择">
                      <el-option v-for="item in state.firstJudgeList" :label="item.idName" :value="item.wxUserRoleId" />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="第二助理裁判员">
                    <el-select v-model="o.secondJudgeAssistantId" placeholder="请选择">
                      <el-option v-for="item in state.secondJudgeList" :label="item.idName" :value="item.wxUserRoleId" />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="第四官员">
                    <el-select v-model="o.fourthOfficialId" placeholder="请选择">
                      <el-option v-for="item in state.fourOfficialList" :label="item.idName" :value="item.wxUserRoleId" />
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-form-item class="mt20">
                <el-button type="primary" @click="handleSubmit(o)">提交</el-button>
              </el-form-item>
            </el-form>
          </el-collapse-item>
        </el-collapse>
      </template>
    </el-card>
  </div>
  <el-empty v-else description="暂无数据" />
</template>

<script lang="ts" setup>
import { onUpdated, reactive, ref } from "vue";
import { updateRaceGroupSchedule } from "@/api/match";
import { ElMessage } from "element-plus";
import { AttestationRoleEnum } from "../../../config/enum";

const props = defineProps([
  "raceGroupScheduleList",
  "raceTeamList",
  "raceRoleList",
]);
const emits = defineEmits(["getRaceGroupSchedule"]);
const optionList = ref([]);
const groupList = ref([]);
const allRoleList = ref([]);
const state = reactive({
  matchSupervisionList: [],
  judgeSupervisionList: [],
  judgeList: [],
  firstJudgeList: [],
  secondJudgeList: [],
  fourOfficialList: [],
});
// 团队点击
const showClick = (e: any, item: any, value: string) => {
  if (value === "homeTeamId") {
    item.homeTeamId = e;
  } else if (value === "awayTeamId") {
    item.awayTeamId = e;
  }
  handleSubmit(item);
};

// 提交数据
const handleSubmit = async (item: any) => {
  const res = await updateRaceGroupSchedule(item);
  if (res.code === 200) {
    ElMessage.success(res.msg);
    emits("getRaceGroupSchedule");
  } else {
    ElMessage.warning(res.msg);
  }
};

const updateRoleList = () => {
  allRoleList.value.map((item: any) => {
    switch (item.roleType) {
      case AttestationRoleEnum.MATCH_SUPERVISION: // 比赛监督
        state.matchSupervisionList = item.wxUserRoleList;
        break;
      case AttestationRoleEnum.JUDGE_SUPERVISION: // 裁判监督
        state.judgeSupervisionList = item.wxUserRoleList;
        break;
      case AttestationRoleEnum.JUDGE: // 裁判员
        state.judgeList = item.wxUserRoleList;
        break;
      case AttestationRoleEnum.FIRST_JUDGE_ASSISTEANT: // 第一裁判助理
        state.firstJudgeList = item.wxUserRoleList;
        break;
      case AttestationRoleEnum.SECOND_JUDGE_ASSISTEANT: // 第二裁判助理
        state.secondJudgeList = item.wxUserRoleList;
        break;
      case AttestationRoleEnum.FOURTH_OFFICIAL: // 第四官员
        state.fourOfficialList = item.wxUserRoleList;
    }
  });
};
// 数据初始
onUpdated(() => {
  groupList.value = props.raceGroupScheduleList;
  optionList.value = props.raceTeamList;
  allRoleList.value = props.raceRoleList;
  updateRoleList();
});
</script>

<style  lang="scss" scoped>
.group-component {
  ::v-deep {
    .el-collapse-item__header {
      height: auto;
    }

    .el-collapse {
      border-top: 0px;
    }

    .el-card__body {
      padding: 0px;
    }
  }

  .card-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .card-item {
    align-items: center;
    padding: 15px 20px;
    width: 100%;
  }

  .card-group {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    min-width: 0;
  }

  .card-group-right {
    flex: 1;
    display: flex;
    justify-content: flex-start;
    min-width: 0;
  }

  .card-img {
    width: 47px;
    height: 47px;
  }

  .drop-line {
    text-decoration: underline;
  }
}
</style>
